<template>
  <div class="father">
    <h3>父组件</h3>
    <h4 v-show="toy">儿子给的玩具:{{ toy }}</h4>
    <h4>{{ str }}</h4>
    <!-- 给子组件Child绑定事件 -->
    <Child @save-toy="toy = $event" />
  </div>
</template>

<script setup lang="ts" name="Father">
import Child from "./Child.vue";
import { ref } from "vue";

let str = ref("你好");
let toy = ref("");

// 上面那种写法一样。$event就是传递过来的值，逻辑简单时可以直接修改了
// function saveToy(val: string) {
//   toy.value = val;
// }
</script>

<style scoped>
.father {
  background-color: rgb(165, 164, 164);
  padding: 20px;
  border-radius: 10px;
}
.father button {
  margin-right: 5px;
}
</style>
